import { useState, useEffect } from 'react';
import { ProgressBar } from 'antd-mobile';
import { useTranslation } from 'react-i18next';
import socket from '@/socket';
import { preloadResources, memory } from '@/utils';
import { soundUrl } from '@/utils/sound';
import Play from '@/components/Play';
import './App.css';
import TopCom from './components/TopCom';
import Bottom from './components/Bottom';

function App() {
  const { t } = useTranslation();
  const [progress, setProgress] = useState(0);
  const [loadingDone, setLoadingDone] = useState(false);
  const [isConnect, setIsConnect] = useState(true);

  useEffect(() => {
    document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
    let base = '';
    if (process.env.NODE_ENV === 'development') {
      base = '/mine';
    }
    preloadResources([
      `${base}/reveal.png`,
      `${base}/button.png`,
      `${base}/laser.png`,
      ...soundUrl,
    ], (progress) => {
      setProgress(progress);
      if (progress === 1) {
        setLoadingDone(true);
      }
    });

  }, []);

  if (!loadingDone || !isConnect) {
    return (
      <div className="loading">
        <div className="loading-logo" />
        <ProgressBar
          className="loading-progress"
          percent={Math.round(progress * 100)}
          text
        />
        <div className="loading-tip">
          <div className="loading-tip-fair">
            <div className="tip-logo" />
            <span>{t('progress.text')}</span>
          </div>
          <div className="tip-text">
            <span>{t('progress.tip')}</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="container">
      <Play />
    </div>
  );
}

export default App;
